<template>
  <div class="app-container">
    <div class="topDiv">
      <div>
        <p class="title">
          <img src="@/assets/img/ptsz.png" alt style="height: 17px" />
          <!-- <img
            src="https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg"
            alt
          /> -->
          <span>公告设置</span>
        </p>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="公告管理" name="version">
            <!-- tab-表格 -->
            <div style="margin: 20px 0px">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="projectDataSummary = true"
                >新增公告</el-button
              >
              <div class="exportButton"></div>
              <el-table
                :data="postList"
                v-loading="loading"
                style="margin-top: 10px"
                height="580"
              >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column
                  label="发布时间"
                  prop="templateName"
                  align="center"
                />
                <el-table-column
                  label="公告名称"
                  prop="createTime"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="状态"
                  prop="templateName"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="editBotton(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="delData(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页插件 -->
            <pagination
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getData"
              style="margin-bottom: 50px"
            />
          </el-tab-pane>
          <el-tab-pane label="路径管理" name="version2">
            <!-- tab-表格 -->
            <div style="margin: 20px 0px">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="PathSummary = true"
                >新增路径</el-button
              >
              <div class="exportButton">
                <!-- <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="margin-bottom: 10px; background: #f5f5f5"
            >导出</el-button
          > -->
              </div>
              <el-table
                :data="postList"
                v-loading="loading"
                style="margin-top: 10px"
                height="580"
              >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column
                  label="路径名称"
                  prop="templateName"
                  align="center"
                />
                <el-table-column
                  label="路径"
                  prop="createTime"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                  </template>
                </el-table-column>
              
                <el-table-column
                  label="分类"
                  prop="templateName"
                  align="center"
                />
               
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="editBotton(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="delData(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页插件 -->
            <pagination
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getData"
              style="margin-bottom: 50px"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 新增公告弹窗 -->
    <el-dialog
      title="新增公告"
      :visible.sync="projectDataSummary"
      width="30%"
      center
    >
      <el-form
        ref="projectData"
        :model="projectData"
        :rules="projectDatarules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="公告标题" prop="field101">
          <el-input
            v-model="projectData.field101"
            placeholder="请输入公告标题"
            clearable
            show-word-limit
             maxlength="30"
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="field102">
          <el-input
            v-model.trim="projectData.field102"
            type="textarea"
            maxlength="300"
            show-word-limit
            placeholder="请输入公告内容"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-row gutter="15">
          <el-form-item label="" prop="field109">
            <el-checkbox-group
              v-model="projectData.field109"
              :min="1"
              size="medium"
            >
              <el-checkbox
                v-for="(item, index) in field109Options"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-row>


        <el-form-item label="显示设置" prop="field114">
          <el-radio-group v-model="projectData.field114" size="medium">
            <el-radio v-for="(item, index) in field114Options" :key="index" :label="item.value"
             >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示次数" prop="field117" v-show="projectData.field114=='2'">
          <el-input-number v-model="projectData.field117" placeholder="显示次数"></el-input-number>
        </el-form-item>


      </el-form>
      <div slot="footer">
        <el-button @click="projectDataSummary = false">取消</el-button>
        <el-button type="primary" @click="projectButton">确定</el-button>
      </div>
    </el-dialog>
    <!-- 新增路径弹窗 -->
    <el-dialog
      title="新增公告"
      :visible.sync="PathSummary"
      width="30%"
      center
    >

       <el-form ref="PathData" :model="PathData" :rules="Pathrules" size="medium" label-width="100px">
        <el-form-item label="名称" prop="field101">
          <el-input v-model.trim="PathData.field101"
          maxlength="30" placeholder="请输入名称" show-word-limit clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="路径" prop="field110">
          <el-input type="textarea" show-word-limit v-model.trim="PathData.field110" maxlength="200" placeholder="请输入路径" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-row gutter="15">
          <el-form-item label="" prop="field111">
            <el-radio-group v-model="PathData.field111" size="medium">
              <el-radio v-for="(item, index) in field111Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button @click="PathSummary = false">取消</el-button>
        <el-button type="primary" @click="PathButton">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { upload } from "@/api/system/index.js";

export default {
  data() {
    return {
      PathSummary:false,
      //新增路径
       PathData: {
        field101: undefined,
        field110: undefined,
        field111: 1,
      },
     Pathrules: {
        field101: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        field110: [{
          required: true,
          message: '请输入路径',
          trigger: 'blur'
        }],
        field111: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
      },
      field111Options: [{
        "label": "pc",
        "value": 1
      }, {
        "label": "phone",
        "value": 2
      }],
      //新增公告
        field114Options: [{
        "label": "每次都显示",
        "value": 1
      }, {
        "label": "显示次数",
        "value": 2
      }],
      activeName: "version",
      projectDataSummary: false,
      projectData: {
        field101: undefined,
        field102: undefined,
        field109: [1],
         field114: 1,
        field117: 5,
      },
      projectDatarules: {
        field101: [
          {
            required: true,
            message: "请输入公告标题",
            trigger: "blur",
          },
        ],
         field114: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field117: [{
          required: true,
          message: '显示次数',
          trigger: 'blur'
        },{
          pattern: /^[1-9]*$/,
          message: '格式错误',
          trigger: 'change'
        }],
        field102: [
          {
            required: true,
            message: "请输入公告内容",
            trigger: "blur",
          },
        ],
        field109: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个field109",
            trigger: "change",
          },
        ],
      },
      field109Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
        {
          label: "选项二",
          value: 3,
        },
        {
          label: "选项二",
          value: 4,
        },
        {
          label: "选项二",
          value: 5,
        },
        {
          label: "选项二",
          value: 6,
        },
        {
          label: "选项二",
          value: 7,
        },
        {
          label: "选项二",
          value: 8,
        },
      ],
      //表格
      postList: [],
      total: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      userId: "",
    };
  },
  async created() {},
  async mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    // this.getData();
  },
  methods: {
    //新增公告提交按钮
    projectButton() {
      this.$refs["projectData"].validate(async (valid) => {
        if (valid) {
          this.projectData = {
            field101: undefined,
            field102: undefined,
            field109: [1],
          };
          this.projectDataSummary = false;

          this.$message({
            type: "success",
            message: "提交成功!",
          });

          this.$message.error("操作失败!");
        }
        // TODO 提交表单
      });
    },
    //新增路径确认按钮
    PathButton() {
      this.$refs["PathData"].validate(async (valid) => {
        if (valid) {
          this.PathData={
        field101: undefined,
        field110: undefined,
        field111: 1,
      };
          this.PathSummary = false;

          this.$message({
            type: "success",
            message: "提交成功!",
          });

          this.$message.error("操作失败!");
        }
        // TODO 提交表单
      });
    },
    handleClick(tab, event) {
      // //console.log(tab, event);
    },
  },
  watch: {
    // form:{
    //     deep:true,
    //     handler:function(newVal,oldVal){
    //          //console.log(newVal,'1111')
    //     //console.log(oldVal,'2222')
    //     }
    // }
  },
};
</script>
<style scoped lang="scss">
.myQuillEditor {
  // border:1px red solid;
  height: 500px;
}
.buttonstyle {
  margin: 90px 0px;
  width: 100px;
}
.inputWidth {
  // width: 310px;
  width: 100%;
}
.app-container {
  .title {
    padding: 0px;
    margin: 0px 0px 10px 0px;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
}
.topDiv {
  padding: 0px 20px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

  .poR {
    position: relative;
    .poA {
      position: absolute;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%);
    }
    .poDiv {
      border: 1px solid #40a0ff00;
      border-radius: 5px;
      padding: 15px;
      .poImg {
        width: 100%;
      }
    }
    .isActive {
      border: 1px solid #409eff;
    }
  }
  .textData {
    background-color: rgb(245, 245, 245);
    padding: 20px;
    border-radius: 7px;
    .colDiv {
      background-color: rgb(252, 252, 252);
      border: 1px solid rgb(230, 230, 230);
      padding: 20px;
    }
  }
}
</style>
